<template>
  <div class="home">
      <el-container style="width: 100%;height: 100%">
          <el-header class="home-header">
              <p>订 单 管 理 EPR 后 台</p>
              <el-dropdown trigger="click" @command="handleCommand">
                  <span class="el-dropdown-link" style="color: #ffffff">
                   管理员, 你好<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
                      <el-dropdown-item command="quitLogin">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
<!--              <el-button type="primary" @click="userQuit" style="display: none">buttonCont</el-button>-->
          </el-header>
          <el-container>
              <el-aside  class="home-aside" width="200px">
                  <el-menu style="border-right: 0"
                           :default-active="$route.path"
                           unique-opened
                           background-color="#393d49"
                           text-color="#fff"
                           active-text-color="#ffd04b"
                           router
                  >
                      <el-submenu
                              :index="item.id"
                              v-for="item in adminList"
                              :key="item.id"
                      >
                          <template slot="title">
                              <i :class="item.icon" ></i>
                              <span>{{ item.name }}</span>
                          </template>
                          <el-menu-item
                                  :index="'/' + item1.path"
                                  v-for="item1 in item.child"
                                  :key="item1.id"
                          >{{ item1.childName }}</el-menu-item
                          >
                      </el-submenu>
                  </el-menu>
              </el-aside>
              <el-main  style="background-color: #ffffff">
                  <router-view/>
              </el-main>
          </el-container>
      </el-container>
    
      <el-dialog title="修改密码" :visible.sync="changePassword" width="30%" center>
          <el-form label-width="100px" label-position="left">
              <el-form-item label="旧密码:" >
                  <el-input v-model="changeData.oldPassword"  placeholder="请输入旧密码"></el-input>
              </el-form-item>
              <el-form-item label="新密码:" >
                  <el-input   v-model="changeData.newPassword" placeholder="请输入新密码"></el-input>
              </el-form-item>
              <el-form-item label="确定新密码:" >
                  <el-input  v-model="changeData.newCheckPassword" placeholder="请确认新密码"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="changePassword = false">取 消</el-button>
              <el-button type="primary" @click="submitPass">确 定</el-button>
          </div>
      </el-dialog>
      
      
  </div>
</template>

<script>
import routerList from "../router/routerList";
import { quitLogin, editPassword} from "../api/userLogin";

export default {
  name: 'Home',
    data(){
      return{
          changePassword:false,
          role:null,
          adminList: null,
          changeData:{
              newCheckPassword: "",
              newPassword: "",
              oldPassword: ""
          },
      }
    },
    created() {
        this.adminList = routerList.adminList
    },
    mounted() {
     
      // window.vue = this
      //   window.getUserQuitLogin =() => {
      //       this.userQuit()
      //   }
    },
    methods:{
        handleCommand (command) {
            console.log(command)
            if (command === 'quitLogin') {
                this.open()
            } else {
                this.changePassword = true
            }
        },
        //退出登录
        // userQuit(){
        //     quitLogin().then(data => {
        //         console.log(data)
        //         if (data.data.code === 200) {
        //             window.sessionStorage.removeItem('token')
        //             window.sessionStorage.removeItem('userInfo')
        //             this.$router.replace('/')
        //             this.$message({
        //                 type: 'success',
        //                 message: '注销成功!'
        //             });
        //         } else {
        //             this.$message.error(data.data.message)
        //         }
        //     })
        // },
        // 退出登录 方法
        open() {
            this.$confirm('确定退出登录, 是否继续?', '注销', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                quitLogin().then(data => {
                    console.log(data)
                    if (data.data.code === 200) {
                        window.sessionStorage.removeItem('token')
                        window.sessionStorage.removeItem('userInfo')
                        this.$router.replace('/')
                        console.log(JSON.stringify({
                            id: 100000,
                            flag: true
                        }))
                        this.$message({
                            type: 'success',
                            message: '注销成功!'
                        });
                    } else {
                        this.$message.error(data.data.message)
                    }
                })
            }).catch(() => {
                console.log('取消')
                this.$message({
                    type: 'info',
                    message: '已取消注销'
                });
            });
        },
        //   修改密码
        async submitPass(){
            if (this.changeData.oldPassword && this.changeData.newPassword && this.changeData.newCheckPassword !== '' && this.changeData.newPassword === this.changeData.newCheckPassword) {
                const { data } = await editPassword(this.changeData)
                if (data.code === 200) {
                    this.$message.success(data.message)
                    this.changePassword = false
                    this.changeData = {}
                    quitLogin().then(data => {
                        console.log(data)
                        if (data.data.code === 200) {
                            window.sessionStorage.removeItem('token')
                            this.$router.replace('/')
                        } else {
                            this.$message.error(data.data.message)
                        }
                    })
                }
            } else {
                this.$message.warning('密码填写错误')
            }
        },
    }
}
</script>

<style lang="less" scoped>
    .home {
        width: 100%;
        height: 100%;
    
        .home-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #555555;
            color: #fff;
        
            p {
                font-size: 22px;
                font-style: italic;
                font-weight: bold;
            }
        }
    
        .home-aside {
            background-color: #393d49;
            color: #ffffff;
            /deep/ .el-submenu__title i {
                color: #ffffff;
            }
        }
    }
</style >
